<head>
<title>Tabs</title>
<style type="text/css">

body {
	font: "Lucida grande",Arial,Verdana,sans-serif;
	background-color: #fff;
	margin: 50px;
}
ul#tabnav {
	text-align: left;
	font: bold 11px verdana, arial, sans-serif;
	list-style-type: none;
	border-radius: 10px 10px 0px 0px;
	margin-top: 1em;
	margin-right: 0;
	margin-bottom: 1em;
	margin-left: 0;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 37%;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #DEDEDE;
	font-weight: lighter;
}

ul#tabnav li {
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 {
	border-bottom: 2px solid #DEDEDE;
	background-color: #DEDEDE;
	border-radius: 10px 10px 0px 0px;
	color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
	background-color: #DEDEDE;
	color: #000;
	position: relative;
	top: 1px;
	padding-top: 4px;
	border-radius: 10px 10px 0px 0px;
	font-weight: lighter;
}

ul#tabnav li a {
	padding: 3px 4px;
	border: 1px solid #65696E;
	background-color: #7C8188;
	color: #FFF;
	margin-right: 0px;
	text-decoration: none;
	border-bottom: none;
	border-radius: 10px 10px 0px 0px;
}

ul#tabnav a:hover {
	background: #ddd;
	border-radius: 10px 10px 0px 0px;
	color: 000;
}
	
</style>
<style type="text/css"></style></head>

<ul id="tabnav">
  <li class="tab1"><a href="tab1.html">Tab One</a></li>
	<li class="tab2"><a href="tab2.html">Tab Two</a></li>
	<li class="tab3"><a href="tab3.html">Tab Three</a></li>
	<li class="tab4"><a href="tab4.html">Tab Four</a></li>
</ul>